<template>
  <div style="background-color: white">
    <div class="probox">
      <div style="display: flex; width: 350px; justify-content: space-between">
        <el-input
          v-model="input"
          style="width: 100px"
          placeholder="关键字"
        ></el-input>
        <el-button type="primary" icon="el-icon-search" @click="searchAttribute"
          >搜索</el-button
        >
      </div>

      <div>
        <el-button
          type="primary"
          @click="
            getCategory();
            dialogVisible = true;
          "
          >+ 添加规格</el-button
        >
      </div>
    </div>
    <el-divider></el-divider>

    <div style="padding: 20px">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="name" label="规格名称" width="180">
        </el-table-column>
        <el-table-column prop="option" label="规格属性" width="260">
        </el-table-column>
        <el-table-column prop="categoryname" label="规格归类" width="150">
        </el-table-column>
        <el-table-column label="操作选项">
          <el-row slot-scope="scope">
            <el-button
              size="mini"
              round
              @click="
                getCategory();
                changeVisible = true;
                form._id = scope.row._id;
                d = scope.row;
              "
              >修改</el-button
            >
            <el-button size="mini" round @click="delAttribute(scope.row._id)"
              >删除</el-button
            >
          </el-row>
        </el-table-column>
      </el-table>
    </div>

    <div style="padding: 10px; text-align: center">
      <!-- total表示总条目数，size用于设置每页显示的页码数量  :page-size='' @current-change='' :current-page='' -->
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageSize"
        :current-page="pageNum"
        @current-change="changePage"
        :total="total"
      >
      </el-pagination>
    </div>
    <!-- 添加规则 -->
    <div>
      <el-dialog title="添加规格" :visible.sync="dialogVisible">
        <el-form ref="form1" :model="form1" label-width="150px">
          <el-form-item label="分类名称" prop="category_id">
            <!-- <el-input v-model="form1.category_id"></el-input> -->

            <el-select v-model="form1.category_id" placeholder="请选择">
              <el-option
                v-for="it in options"
                :key="it._id"
                :label="it.name"
                :value="it._id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="规格名称" prop="name">
            <el-input v-model="form1.name"></el-input>
          </el-form-item>
          <el-form-item label="规格属性" prop="option">
            <el-select
              v-model="form1.option"
              multiple
              filterable
              allow-create
              default-first-option
            >
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="
              dialogVisible = false;
              addAttribute(form1);
            "
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
    <!-- 修改规格 -->

    <div>
      <el-dialog title="修改规格" :visible.sync="changeVisible">
        <el-form ref="form" :model="form" label-width="150px">
          <el-form-item label="分类名称" prop="category_id">
            <!-- <el-input v-model="form.category_id"></el-input> -->

            <el-select v-model="form.category_id" placeholder="请选择">
              <el-option
                v-for="it in options"
                :key="it._id"
                :label="it.name"
                :value="it._id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="规格名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="规格属性" prop="option">
            <el-select
              v-model="form.option"
              multiple
              filterable
              allow-create
              default-first-option
            >
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="changeVisible = false">取 消</el-button>
          <el-button
            type="primary"
            @click="
              changeVisible = false;
              updateAttribute(form);
            "
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  methods: {
    ...mapActions([
      "getAttributes",
      "delAttributes",
      "updateAttributes",
      "addAttributes",
      "searchAttributes",
      "getCategorys",
    ]),

    delAttribute(_id) {
      this.delAttributes(_id);
    },
    updateAttribute(form) {
      this.updateAttributes(form);
    },
    addAttribute(form1) {
      this.addAttributes(form1);
    },
    getCategory() {
      console.log("dasdhnais");
      var parentId = 0;
      this.getCategorys({ parentId });
      // this.options = this.$store.state.products.categorys.list;
    },
    searchAttribute() {
      var value = this.input;
      var pageSize = 3;
      var pageNum = 1;
      this.searchAttributes({ pageNum, pageSize, value });
    },
    changePage(pageNum) {
      var pageSize = this.pageSize;
      this.getAttributes({ pageNum, pageSize });
    },
  },
  data() {
    return {
      d: "",
      input: "",
      dialogVisible: false,
      changeVisible: false,
      form: {
        _id: "",
        name: "",
        option: [],
        category_id: "",
      },
      form1: {
        name: "",
        option: [],
        category_id: "",
      },
    };
  },
  computed: {
    tableData() {
      return this.$store.state.products.attributes.list;
    },
    total() {
      return this.$store.state.products.attributes.total;
    },
    pageNum() {
      return Number(this.$store.state.products.attributes.pageNum);
    },
    pageSize() {
      return Number(this.$store.state.products.attributes.pageSize);
    },
    options() {
      return this.$store.state.products.categorys.list;
    },
  },
};
</script>